<template>
    <div class="main">
        <top-image :src="useUserStore().cover"></top-image>
        <m-waterfall :data="waterfallData">
            <template name="item" v-slot:item="{ item }">
                <m-transition name="zoomInUp" toggle :duration="{ enter: 1000, leave: 1000 }">
                    <m-card v-if="!animate" class="m-flex m-f-column" hoverable>
                        <div class="img" style="width: 100%;">
                            <img v-lazy="getImageUrl(item.imgSrc)" style="width: 100%;" />
                        </div>
                        <div class="title">
                            <h3>{{ item.title }}</h3>
                        </div>
                        <div class="desc">
                            <p>{{ item.desc }}</p>
                        </div>
                        <div class="others m-flex">
                            <div class="others-row">
                                <img :src="getImageUrl(item.imgSrc)" width="30" height="30" style="border-radius: 50%;" />
                                <span>{{ item.author }}</span>
                            </div>
                            <div class="others-row">
                                <svg-icon name="lift"></svg-icon>
                                <span>{{ item.like }}</span>
                            </div>
                            <div class="others-row">
                                <svg-icon name="lift"></svg-icon>
                                <span>{{ item.read }}</span>
                            </div>
                            <div class="others-row">
                                <svg-icon name="lift"></svg-icon>
                                <span>{{ item.comment }}</span>
                            </div>
                        </div>
                    </m-card>
                </m-transition>
            </template>
        </m-waterfall>
    </div>
</template>

<script lang="ts" setup>
import { waterfallData } from '@/mock/waterfall';
import { getImageUrl } from '@/utils/core';
import TopImage from '../shared/TopImage.vue';
import { ref } from 'vue';
import { components, useUserStore } from '@/store'

const animate = ref(false);

components.useMainStore()._getArticleList();
</script>